www.gusucode.com > 实用的网页Js图片滚动 无缝控制滚动代码源码程序 > 实用的网页Js图片滚动 无缝控制滚动代码/prototype图片滚动/prototype图片滚动/imgLoopView.js

    // Download by http://www.srcfans.com
var imgLoopView = Class.create();
imgLoopView.prototype = {
	initialize:function(id,direction){
		this.step = 1;
		this.interval = 0.01;
		this.gap = 10;//图片之间的间隔
		this.direction = direction || "Left";
		this.scrollId;
		this.oA = $(id);//遮罩
		this.o1;//滚动内容
		this.o2;//滚动内容克隆
		this.maskW = this.oA.getWidth();//遮罩的宽度，由style里的width获得
		this.scrollW = 0; //滚动元素的总宽度
		this.init();
	},

	init:function(){
		this.render();
		this.start();
		this.oA.observe("mouseover",this.stop.bind(this));
		this.oA.observe("mouseout",this.start.bind(this));
		this.oA.observe("mouseover",this.imgOver);
		this.oA.observe("mouseout",this.imgOut);
	},

	render:function(){
		this.oA.insert(new Element("ul"));
		this.o1 = this.oA.down();
		this.o2 = this.o1.next();

		this.o1.setStyle({
			left:"0px"
		});
		this.o1.childElements().each(function(o,i){
			var oW = o.getWidth();
			o.setStyle({
				position:"absolute",
				left:this.scrollW+"px"
			})
			this.scrollW += this.gap+oW;
		}.bind(this));
		this.o2.innerHTML = this.o1.innerHTML;
		this.o2.setStyle({
			left:this.scrollW+"px"
		});
	},

	start:function() {
		if(!this.scrollId){
			if (this.direction == "Left"){
				this.scrollId = new PeriodicalExecuter(this.moveLeft.bind(this,this.step), this.interval);
			}else{
				this.scrollId = new PeriodicalExecuter(this.moveRight.bind(this,this.step), this.interval);
			}
		}
	},

	stop:function() {
		if(this.scrollId){
			this.scrollId.stop();
			this.scrollId = 0;
		}
	},

	toggle:function() {
		this.scrollId?this.stop():this.start();
	},

	goLeft:function() {
		this.direction = "Left";
		this.stop();
		this.start();
	},

	goRight:function() {
		this.direction = "Right";
		this.stop();
		this.start();
	},

	toggleDir:function() {
		this.direction=="Left"?this.goRight():this.goLeft();
	},

	moveLeft:function(step) {
		var o1Left = parseInt(this.o1.getStyle("left"));
		var o2Left = parseInt(this.o2.getStyle("left"))
		if (-o1Left>this.scrollW)
		{
			this.o1.setStyle({
				left:o2Left+this.scrollW+"px"
			});
		}
		if (-o2Left>this.scrollW)
		{
			this.o2.setStyle({
				left:o1Left+this.scrollW+"px"
			});
		}
		
		this.o1.setStyle({
			left: parseInt(this.o1.getStyle("left"))-step+"px"
		});
		this.o2.setStyle({
			left: parseInt(this.o2.getStyle("left"))-step+"px"
		});
	},

	moveRight:function(step) {
		var o1Left = parseInt(this.o1.getStyle("left"));
		var o2Left = parseInt(this.o2.getStyle("left"))
		if (o1Left>this.scrollW)
		{
			this.o1.setStyle({
				left:o2Left-this.scrollW+"px"
			});
		}
		if (o2Left>this.scrollW)
		{
			this.o2.setStyle({
				left:o1Left-this.scrollW+"px"
			});
		}
		
		this.o1.setStyle({
			left: parseInt(this.o1.getStyle("left"))+step+"px"
		});
		this.o2.setStyle({
			left: parseInt(this.o2.getStyle("left"))+step+"px"
		});
	},

	imgOver:function(e) {
		var o = e.element();
		if (o.tagName == "IMG")
		{
			o.setStyle({ border:"1px solid #FFF" });
			new Effect.Opacity(o, { from: 0, to: 1, duration: 0.3 });
		}
	},
// Download by http://www.srcfans.com
	imgOut:function(e) {
		var o = e.element();
		if (o.tagName == "IMG")
		{
			o.setStyle({ border:"1px solid #666" });

		}
	}
};